<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件压缩测试</title>
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .preview {
            margin-top: 20px;
            display: flex;
            gap: 20px;
        }
        .preview-box {
            flex: 1;
        }
        .preview-box img, .preview-box video {
            max-width: 100%;
            height: auto;
        }
        .info {
            margin: 20px 0;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        .supported-types {
            margin: 20px 0;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>文件压缩测试</h2>
        <div class="supported-types">
            支持的文件类型：
            <ul>
                <li>图片：jpg, jpeg, png, webp, gif</li>
                <li>视频：mp4, webm, mov</li>
                <li>其他：txt, pdf, doc, docx 等</li>
            </ul>
        </div>
        <div>
            <input type="file" id="fileInput">
            <input type="number" id="maxSize" placeholder="最大文件大小(MB)" step="0.1">
            <button onclick="handleCompress()">压缩</button>
        </div>

        <div class="info" id="info"></div>

        <div class="preview">
            <div class="preview-box">
                <h3>原文件预览</h3>
                <div id="originalPreview"></div>
            </div>
            <div class="preview-box">
                <h3>压缩后预览</h3>
                <div id="compressedPreview"></div>
            </div>
        </div>

        <div class="upload-config">
            <h3>上传配置（可选）</h3>
            <div>
                <input type="text" id="uploadUrl" placeholder="上传地址">
            </div>
            <div>
                <input type="text" id="authToken" placeholder="认证令牌">
            </div>
            <div>
                <input type="text" id="extraData" placeholder="额外数据 (JSON格式)">
            </div>
        </div>
    </div>

    <script type="module">
        import compressFile from './imageCompressor.js';

        window.handleCompress = async () => {
            const fileInput = document.getElementById('fileInput');
            const maxSizeInput = document.getElementById('maxSize');
            const infoDiv = document.getElementById('info');
            const originalPreview = document.getElementById('originalPreview');
            const compressedPreview = document.getElementById('compressedPreview');

            try {
                const file = fileInput.files[0];
                if (!file) {
                    alert('请选择文件');
                    return;
                }

                const maxSize = maxSizeInput.value ? Number(maxSizeInput.value) : undefined;

                // 获取上传配置
                const uploadUrl = document.getElementById('uploadUrl').value;
                const authToken = document.getElementById('authToken').value;
                const extraDataStr = document.getElementById('extraData').value;

                let uploadConfig = null;
                if (uploadUrl) {
                    uploadConfig = {
                        url: uploadUrl,
                        headers: authToken ? { 'Authorization': `Bearer ${authToken}` } : {},
                        data: extraDataStr ? JSON.parse(extraDataStr) : {}
                    };
                }

                // 清空预览
                originalPreview.innerHTML = '';
                compressedPreview.innerHTML = '';

                // 显示原文件预览
                await showPreview(file, originalPreview);

                // 压缩并可选上传文件
                const result = await compressFile(file, maxSize, uploadConfig);
                const compressedFile = result.file;

                // 显示压缩后预览
                await showPreview(compressedFile, compressedPreview);

                // 显示信息
                let infoHtml = `
                    <p>原始文件大小：${(file.size / (1024 * 1024)).toFixed(2)} MB</p>
                    <p>压缩后文件大小：${(compressedFile.size / (1024 * 1024)).toFixed(2)} MB</p>
                    <p>文件名：${compressedFile.name}</p>
                    <p>文件类型：${compressedFile.type}</p>
                    <p><a href="${URL.createObjectURL(compressedFile)}" download="${compressedFile.name}">下载压缩后的文件</a></p>
                `;

                // 如果有上传响应，显示上传结果
                if (result.response) {
                    infoHtml += `
                        <p>上传状态：成功</p>
                        <p>上传响应：${JSON.stringify(result.response)}</p>
                    `;
                }

                infoDiv.innerHTML = infoHtml;
            } catch (error) {
                console.error('压缩过程出错：', error);
                infoDiv.innerHTML = `<p style="color: red">错误：${error.message}</p>`;
            }
        };

        async function showPreview(file, container) {
            const fileType = file.type.split('/')[0];

            switch (fileType) {
                case 'image':
                    const img = document.createElement('img');
                    img.src = URL.createObjectURL(file);
                    container.appendChild(img);
                    break;
                case 'video':
                    const video = document.createElement('video');
                    video.src = URL.createObjectURL(file);
                    video.controls = true;
                    container.appendChild(video);
                    break;
                default:
                    container.innerHTML = `
                        <p>文件类型：${file.type}</p>
                        <p>文件大小：${(file.size / (1024 * 1024)).toFixed(2)} MB</p>
                    `;
            }
        }
    </script>
</body>
</html>